<template>
    <div class="certificate-wrapper">
        <breadcrumb :navdata="bdname"></breadcrumb>
        <div class="certificate-top">
            <div class="certificate-tab">
                <div :class="{active:isSource=='0'}" class="submit-source" @click="changeTab('0')">提交素材</div>
                <div :class="{active:isSource=='1'}" class="receive-enclosure" @click="changeTab('1')">接收附件</div>
            </div>
            <div class="submits" v-if="isSource=='0'">
                <div class="submit-mark">
                    <div>支持DOC、DOCX、PDF、JPG、PNG、ZIP、RAR格式附件</div>
                    <div>文件大小不超过8M</div>
                </div>
                <div class="submits-btn" @change="submitSource">提交素材<input type="file" class="file" id="file" name="file"/></div>
            </div>
        </div>

        <div class="certificate-content">
            <submit-source name='source' v-if="isSource==0"></submit-source>
            <receive-enclosure name='enclosure' v-if="isSource==1"></receive-enclosure>
        </div>
    </div>
</template>
<script>
import breadcrumb from "basic/breadcrumb/breadcrumb"
import submitSource from './submitSource.vue'
import receiveEnclosure from './receiveEnclosure.vue'
import { mapGetters} from 'vuex'
import { fileUpload, saveMaterialList } from "api/getData"

export default {
    name: 'checkendCertificate',
    data(){
        return{
            bdname: [
            {
            name: '首页',
            url: '/'
            },
            {
            name: '我的课程',
            url: '/personal?flag=2'
            },
            {
            name: '上传就业素材',
            url: '/uploadJobmes'
            }
            ],
            fileObj:null
        }
    },
    inject:['reload'],
    components: {
        breadcrumb,
        submitSource,
        receiveEnclosure
    },
    computed:{
        isSource() {
            return this.$route.query.flag;
        },
        ...mapGetters([
        'currentUser'
        ])
    },
    methods:{
        changeTab(isSource) {
            this.$router.replace({
                path: '/uploadJobmes',
                query: 
                {
                    flag: isSource
                }
            })
        },
        submitSource(){
            this.fileObj = document.getElementById("file").files[0];//获取文件信息
            let size = (this.fileObj.size / (1024 * 1024)).toFixed(2);
            // console.log(size)
            if ( this.fileObj.type != 'application/msword' && this.fileObj.type!='application/vnd.openxmlformats-officedocument.wordprocessingml.document' && this.fileObj.type != 'application/pdf' && this.fileObj.type != 'image/jpeg'&& this.fileObj.type != 'image/png'&& this.fileObj.type != 'application/zip' && this.fileObj.type!='rar') {
                    //判断图片格式  依次 为  doc docx pdf jpg png zip rar
                this.$alert('选择的文件无效，请重新选择', '提示', {
                    confirmButtonText: '确定',
                    showClose: false,
                    callback: action => {
                    }
                });
            }else if(size>8){
                this.$alert('文件大小超过8M，请检查文件大小', '提示', {
                    confirmButtonText: '确定',
                    showClose: false,
                    callback: action => {
                    }
                });
            }else{
                let param = new FormData() // 创建form对象
                    param.append('file', this.fileObj) // 通过append向form对象添加数据
                    // console.log(param.get('file')) // FormData私有类对象，访问不到，可以通过get判断值是否传进去
                let config = {headers: {'Content-Type': 'multipart/form-data'}}
                fileUpload(param, config).then(response => {
                    if(response.state=='SUCCESS')
                    {
                        saveMaterialList(this.currentUser.cluesOrStuId.toString(),response.url,response.key,response.size,response.title,0).then(res=>{
                            this.reload()
                        })
                    }
                })
            }
        }
    }
}
</script>
<style lang="stylus" scoped>
    .certificate-wrapper
      background:#f5f5f5
      .certificate-top
        display: flex;
        width: 1200px;
        margin: 30px auto 0;
        .certificate-tab
          display:flex;
          >div
            font-size:14px;
            font-family:MicrosoftYaHeiUI;
            font-weight:400;
            color:rgba(118,118,118,1);
            margin-right:58px;
            width:112px;
            height:32px;
            text-align:center;
            line-height:32px;
            cursor:pointer
            &.active
              border:1px solid rgba(255,98,82,1);
              border-radius:16px;
              color:rgba(255,98,82,1);
              height:30px;
              line-height:30px
        .submits
          flex: 1;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          .submit-mark
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 40px;
            >div
              font-size: 14px;
              font-family: MicrosoftYaHei;
              font-weight: 400;
              color: rgba(164,164,164,1);
              &:last-child
                color: rgba(255,98,82,1);
          .submits-btn
            width: 86px;
            height: 44px;
            text-align: center;
            line-height: 44px;
            background: rgba(255,98,82,1);
            border-radius: 2px;
            font-size: 14px;
            font-family: MicrosoftYaHei;
            font-weight: 400;
            color: rgba(255,255,255,1);
            margin-left: 20px;
            position:relative
            .file
              width: 86px;
              height: 44px;
              position: absolute;
              left: 0;
              opacity: 0;
        .submit-source
          margin-left:29px


</style>
